<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.height"
        />
      </el-form-item>

      <el-form-item label="外边距"  v-if="false">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.margin"
        />
      </el-form-item>

      <el-form-item label="顶部边距">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.marginTop"
        />
      </el-form-item>

      <el-form-item label="底部边距">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.marginBottom"
        />
      </el-form-item>
      <el-form-item label="文本">
        <el-switch
            v-model="optionsInfo.textHide"
            :disabled="!(optionsInfo.videoHide)"
            @change="(e)=>handleChange(e,'textHide')"
        />
      </el-form-item>
      <el-form-item label="右侧显示" v-if="optionsInfo['rightType']" class="wait-patient-set">
        <el-radio-group v-model="optionsInfo['rightType']">
              <el-radio  v-for="(item) in typeList" :label="item.value" :key="item.value">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文本背景色" v-if="optionsInfo['rightType'] === 'text'">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.contentTitleBgColor"
        />
      </el-form-item>
      <el-form-item label="右侧图片" v-if="optionsInfo['rightType'] === 'img'">
         <el-button type="primary" size="small" @click="handleSelect('formCarouselInfo',(optionsInfo.carouselInfo))">
          右侧图片
        </el-button>
      </el-form-item>

      <el-form-item label="视频">
        <el-switch
            v-model="optionsInfo.videoHide"
            :disabled="!(optionsInfo.textHide)"
            @change="(e)=>handleChange(e,'videoHide')"
        />
      </el-form-item>

      <el-form-item label="视频边距">
        <el-input-number
            :min="0"
            size="small"
            :disabled="!(optionsInfo.videoHide)"
            v-model="optionsInfo['videoPadding']"
        />
      </el-form-item>

      <template v-if="true">
        <el-form-item label="文本标题">
          <el-switch v-model="optionsInfo.tipsHeaderShown"/>
        </el-form-item>

        <el-form-item label="文本">
          <el-input
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo.title"
          />
        </el-form-item>
      </template>


      <el-form-item label="文本内容" v-if="optionsInfo.textHide">
        <el-button type="primary" size="small" @click="handleSelect('formEditorInfo',(optionsInfo.content))">
          文本内容
        </el-button>
      </el-form-item>

      <el-form-item label="视频内容" v-if="optionsInfo.videoHide">
        <el-button type="primary" size="small" @click="handleSelect('formVideoInfo',(optionsInfo.video))">
          视频内容
        </el-button>
      </el-form-item>

      <!--已经上传的资源-->
      <carouselEditor
          v-if="false"
          :delayState="false"
          :designer="designer"
          resourceType="video"
          :option-model="optionModel"
          :selected-widget="selectedWidget"
      />
      <!--已经上传的资源-->
      <el-form-item label="选中素材" class="resource-area" v-if="false">
        <div class="picture-resource">
          <Draggable
              class="list-group"
              @end="handleDragEnd"
              :list="optionsInfo['video']"
              :animation="100"
          >
            <template v-for="(item,index) in optionsInfo['video']">
              <div class="flex-box item-area">
                <p class="name flex-box-left">
                  <el-tooltip class="item" effect="dark" :content="(item.name)" placement="top-start">
                    <el-button>{{ item.name }}</el-button>
                  </el-tooltip>
                </p>
                <p class="icon flex-box-right">
                  <i class="el-icon-delete" @click.prevent="handleDelete(index,'video')"/>
                  <i class="el-icon-thumb"></i>
                </p>
              </div>
            </template>
          </Draggable>

        </div>
      </el-form-item>
    </div>
    <!--富文本弹层-->
    <updateFormEditor
        :visible="formEditorInfo.visible"
        :info="formEditorInfo.info"
        @handleCancel="handleCancel"
        @handleSure="handleSure"
    />
    <!--选择视频-->
    <updateVideo
        :key="uuid"
        :multiple="formVideoInfo.multiple"
        :visible="formVideoInfo.visible"
        :info="formVideoInfo.info"
        @handleCancel="handleCancel"
        @handleSure="handleSure"
    />
    <!--选择图片的弹层-->
    <updatePicture
        @handleSure="handleSure"
        @handleCancel="handleCancel"
        :info="formCarouselInfo.info"
        :visible="formCarouselInfo.visible"
    />
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import Draggable from "vuedraggable"
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";

import updateVideo from '@c/public/layer/template/updateVideo/index.vue'
import updatePicture from "@c/public/layer/template/updatePicture/index.vue";
import updateFormEditor from '@c/public/layer/template/updateFormEditor/index.vue'
import carouselEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/carousel-editor.vue";

import DrawerSource from "@c/public/layer/template/drawerSource";


export default {
  name: "infoPublicConfig-editor",

  componentName: "infoPublicConfig-editor",

  mixins: [],

  components: {
    Draggable,
    updateVideo,
    updatePicture,
    DrawerSource,
    carouselEditor,
    updateFormEditor,
  },

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      uuid: uuid(),
      radio: 1,
      screenType: '',
      optionsInfo: Object(),
      constantDic: constantDic,
      formEditorInfo: {
        info: '',
        visible: false,
      },
      formVideoInfo: {
        info: '',
        visible: false,
      },
      predefineColors: types['predefineColors'],
      formCarouselInfo: {
        info: '',
        visible: false,
      },
      typeList: [
        {
          value: 'text',
          label: '文字'
        },
        {
          value: 'img',
          label: '图片'
        },
      ],
    }
  },

  methods: {
    // 替换LOGO
    PictureHandleSure(val) {
      if (this.$lodash.isEmpty(val)) return;
      Reflect.set(this.optionsInfo, "imgUrl", val.val.url);
    },
     // 取消弹层
    PictureHandleCancel(){
      Reflect.set(this.PictureInfo, "visible", false);
    },
    handleDragEnd() {
    },

    handleChange(val, key) {
      this.optionsInfo[key] = val;
    },

    // 选择文本内容&视频
    handleSelect(val, content) {
    console.log(val, content)
      let params = Object();
      this.uuid = uuid();
      switch (val) {
        case 'formEditorInfo':
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'content');
          // 旧的数据
          Reflect.set(params, 'content', content || '')
          Reflect.set((this.formEditorInfo), 'visible', true);
          Reflect.set((this.formEditorInfo), 'info', params);
          break
        case 'formVideoInfo':
          // 查找资源库对应的资源
          Reflect.set(params, 'type', 'video');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'video');
          Reflect.set(params, 'multiple', true);
          // 旧的数据
          Reflect.set(params, 'content', content || '')
          // Reflect.set(params, 'content', Array())
          Reflect.set((this.formVideoInfo), 'visible', true);
          Reflect.set((this.formVideoInfo), 'info', params);
          break
        case 'formCarouselInfo':
          // 查找资源库对应的资源
          // image,office
          Reflect.set(params, 'type', 'image');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'carouselInfo');
          // 旧的数据
          Reflect.set(params,'content',content || []);
          // Reflect.set(params, 'content', []);
          // 是否支持多图片
          Reflect.set(params, 'multiple', false);
          Reflect.set((this.formCarouselInfo), 'visible', true);
          console.log(params)
          Reflect.set((this.formCarouselInfo), 'info', params);
          break
      }
    },
    // 取消弹层
    handleCancel() {
      Reflect.set((this.formEditorInfo), 'visible', false);
      Reflect.set((this.formVideoInfo), 'visible', false);
      Reflect.set((this.formCarouselInfo), 'visible', false);
    },

    // 更新就的数据
    handleSure(valInfo) {
      let {key, val} = valInfo;
      console.log(key,val)
      if (key === 'content') {
        Reflect.set((this.optionsInfo), key, val);
      } else {
        let preInfo = this.optionsInfo[key];
        // let info = [...preInfo,...val];
        let info = [...val];
        Reflect.set((this.optionsInfo), key, info);
      }
    },

    // 删除上传的资源
    handleDelete(index, type) {
      let {carouselInfo, video} = this.optionsInfo;
      switch (type) {
        case 'carouselInfo':
          carouselInfo.splice(index, 1);
          break
        case 'video':
          video.splice(index, 1);
          break
      }
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style lang="scss" scoped>
.wait-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;;

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 10px 0;
      }
    }
  }

}
.process-step {
  display: flex;
  flex-direction: column;

  ::v-deep .el-form-item__label {
    display: none;
    width: 100% !important;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;;
  }

  .header-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    align-self: center;
    align-items: center;

    .title {
      @include fontWeight();
      font-size: 20px;
    }

    .el-button {
      padding: 8px 22px
    }
  }

}

.number-area,
.resource-area,
.tips-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 14px;
  align-self: center;
  align-items: center;

  :deep(.el-form-item__label) {
    width: 100% !important;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;
  }

  :deep(.ql-toolbar) {
    padding: 0;
    border-bottom: none;

    .ql-formats {
      display: none;
    }
  }

  :deep(.ql-container) {
    min-height: 180px;

    .ql-editor p {
      line-height: 28px;
    }
  }
}

.picture-resource {
  .item-area {
    min-width: inherit;
    min-height: inherit;

    .name {
      border: none;
      min-width: calc(100% - 64px);
      overflow: hidden;
      margin-right: 10px;

      .el-button {
        border: none;
        background: transparent;
        @include singleEllipsis(100%);
        text-align: left;
        padding: 9px 0
      }
    }

    .icon {
      min-width: 48px;
      height: auto;
      border: none;
      font-size: 18px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;

      i {
        cursor: pointer;

        &:first-child {
          padding-right: 6px;
        }

        &:hover {
          color: dodgerblue;
        }
      }
    }
  }
}

</style>